<template>
	<view class="c-icon" :class="'c-'+name" :style="'font-size:'+size+'px;color:'+color">
		<view v-if="dot" class="c-dot" :style="cInfo?'height:32rpx':'height:16rpx'">
			{{cInfo}}
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			name:{
				type:String,
			},
			dot:{
				default:false
			},
			info:{
				type:[String,Number,Boolean],
				default:null
			},
			size:{
				type:[String,Number],
				default:26
			},
			color:{
				type:String,
				default:"#323233"
			}
		},
		data(){
			return{
				cInfo:""
			}
		},
		created() {
			this.changeInfo()
		},
		methods:{
			changeInfo:function(){
				if(this.info <= 99){
					this.cInfo = this.info
				} else if(this.info > 99){
					this.cInfo = "99+"
				}
			}
		},
	}
</script>

<style scoped>
	@import url("/static/css/icon.css");
	.c-icon{
		font-size: 26px;
		position: relative;
	}
	.c-dot{
		padding: 0 8rpx;
		border-radius: 16rpx;
		position: absolute;
		top: 0;
		right: 0;
		background: #ee0a24;
		font-size: 26rpx;
		color: #FFFFFF;
		transform: translate(50%,-40%);
	}
</style>